<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.easyui.min.js"></script> -->
<!-- <script type="text/javascript" src="../plugins/jquery.panel.js"></script> -->
<!-- <script type="text/javascript" src="../plugins/jquery.parser.js"></script> -->
<!-- <script type="text/javascript" src="../plugins/jquery.draggable.js"></script> -->
<script type="text/javascript" src="../easyloader.js"></script>

<script>
	// 	function open1() {
	// 		$('#p').panel('open');
	// 	}
	// 	function close1() {
	// 		$('#p').panel('close');
	// 	}
	// 	function load1() {
	// 		$('#p').panel('refresh', 'tabs_href_test.html');
	// 	}
	$(function() {
		// 		alert($('div').length);
		// 		$('#test').remove();
		// 		alert($('div').length);
		// 		var ps = $('div.easyui-panel').find('>p');
		// 		console.info(ps.constructor == $);
		// 		ps.each(function() {
		// 			console.info(this.constructor == $);
		// 		});
		// 		var header = $("<div class=\"panel-header\">hello</div>").prependTo(
		// 				$('#test'));
		// 		console.info(header.html());
		$('#test').css({
			'width' : '300px',
			'height' : '100px',
			'padding' : '10px',
			'overflow' : 'auto',
			'border' : 'solid 1px'
		});
		// 		for ( var i = 0; i < 20; i++) {
		// 			$('#test').append('<p>' + i + '</p>');
		// 		}
		$('#test_1').bind('click', function(e) {
			alert('123');
			// 			return false;
			// 			e.stopPropagation();
			// 			e.preventDefault();
			// 			return false;
		});
		// 		$('#test_1').bind('click', function() {
		// 			$('#test_1').triggerHandler('click');
		// 		});
		$('#test').click(function() {
			// 			$('#test_1').trigger('_focus');
			// 			alert(0);
			// 			$('#test_1').triggerHandler('click');
			alert($('#p').parent().attr('class'));

			$('.panel').parent().draggable({
			// 			handle : '#'
			});
		});
		// 		var obj = $('#test').add('<span>asdfaf</span>');
		// 		alert($('#test').height() + '  ' + $('#test').outerHeight());

		// 		$(window).scroll(function() {
		// 			console.info($('.easyui-panel').scrollTop());
		// 		});

	});
</script>
</head>
<body>
	<h2>Panel</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Click the right top buttons to perform actions with panel.</div>
	</div>

	<div style="margin: 10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="open1()">Open</a> <a
			href="#" class="easyui-linkbutton" onclick="close1()">Close</a> <a
			href="#" class="easyui-linkbutton" onclick="load1()">Load</a>
	</div>
	<div style="height: 500px; background: #fafafa; padding: 5px;">
		<div id="p" class="easyui-panel"
			style="width: 200px; height: auto; padding: 10px;" title="My Panel"
			iconCls="icon-save" collapsible="true" minimizable="true"
			maximizable=true closable="true" drag="true">
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
		</div>
	</div>
	<div id="test">
		<a id="test_1" href="http://www.baidu.com">dasfasdfadf</a>
	</div>

</body>
</html>